<template>
       <div class="Profile-general-info">
            <div class="Profile-general-info-t">
                <div class="Profile-general-info-t-img">
                    <el-avatar :size="92" :src="user.circleUrl"></el-avatar>
                    <div class="avatar-hidebg">
                       <img src="@/assets/icon/camera.svg" class="avatar-hide" alt="头像">
                       <input id="file" type="file" accept=".png, .jpg, .jpeg"  title="" @change="TuploadAvatar($event)"
                       style="padding: 30px;width: 200px;opacity: 0.01; " >
                    </div>
                </div>
                <div class="Profile-general-info-t-info">
                 <span style="margin-left: 20px"> {{user.nickname}}</span>
                </div>
            </div>

            <div class="Profile-general-info-d">
                 <div class="personHomePage">
                    <a href="" style="margin-left: 115px;text-decoration: none;color: black">
                      个人主页
                      <img src="@/assets/icon/chevron-right.svg" style="margin-left: 10px; width: 10px">
                    </a>

                 </div>
            </div>
        </div>  
</template>

<script>
import {uploadAvatar} from "@/api/formdata"
export default {
        name:"ProfileGeneralInfo",
        data() {
            return {
              user:{
                circleUrl:localStorage.getItem("avatar"),
                nickname:localStorage.getItem("nickname")
              },

                value:""
            }
        },
        methods: {
            TuploadAvatar(e){ 
               var file= e.target.files[0];
               var form = new FormData();
                form.append("file", file);
            
              uploadAvatar(form).then(url=>{
                  localStorage.setItem("avatar",url);
                  location.reload();
              });
              
            }
 
    }
}
</script>

<style>

.Profile-general-info{
    width: 100%;
    padding: 24px 24px 0px 0px ;
    display: flex;
    flex-direction: column;
  overflow: hidden;
  height: fit-content;
  margin-bottom: 40px;

}
.Profile-general-info-t{
    display: flex;
    flex-direction: row;
    /*height: 100%;*/
    width: 100%;
    flex-grow:1;
}
.Profile-general-info-d{
  /*height: 100%;*/
  width: 100%;
  /*background-color: red;*/
  flex-grow:2 ;
   display: flex;
  align-items: center;
}
.Profile-general-info-t-img{
    position: relative;
    flex-basis: 92px;
    height: 92px;
  margin-top: 30px;
}
.Profile-general-info-t-img .avatar-hidebg{
    position: absolute;
    top: 0px;
    width: 92px;
    height: 92px;
    border-radius:5cm;
    background-color: rgb(128, 128, 128,0.4);
    display: none;


}
.Profile-general-info-t-img .avatar-hide{
    width: 30px;
    position: absolute;
    left: 31px;
    top: 28px;
    display: block;

}
.Profile-general-info-t-img:hover .avatar-hidebg{
    display: block;

}
.Profile-general-info-t-info{

    flex-basis: 432px;
    height: 100px;
  font-size: large;
  line-height: 80px;

}

/* 上传 */


</style>